<template>
  <div class="maintainHome" :class='{maintainActive:download}'>
    <download @close-down='closeDowns' v-if='download'></download>
    <x-header style="color:#666666!important" title="智能保养" :left-options="{backText:'',preventGoBack:true}" @click.native='goBack' class="redwhite">
      <div slot='right' class="byText" @click.stop='goDetail(maintainMess.MANUAL_URL,"保养手册")'>保养手册</div>
      <!-- <img src="../../assets/image/customer/serverWhite.png" slot='right' class="toServerchat" @click.stop='toServerChat'> -->
    </x-header>
    <div class="carMess">
      <img :src="publicUrl+carMess.SICON" v-if='carMess.SICON'/>
      <div class="detailMess" @click='replaceCar'>
        <h1>{{carMess.BRAND}} {{carMess.SET}}</h1>
        <p>{{carMess.MODEL}}</p>
      </div>
      <div class="mileage" @click='selectMille(carMess.MILE)'>
        <h1>{{carMess.MILE}}<span>km</span></h1>
        <div class="mileMess">
          <span>当前里程</span>
          <img src="../../assets/image/maintain/editW.png" alt="" />
        </div>
      </div>
    </div>
    <div class="mainCard">
      <h1>你的爱车有<em>{{jLength}}</em>项需要保养<span @click.stop='goDetail(maintainMess.FREETEST_URL,"免费检测")'>赠12项项目保养检测</span></h1>
      <div class="cardItem">
        <div class="selectItem" v-for='(item,index) in maintainMess.BASICS_DATA' :key="index">
          <div class="h2">
              <div class="ItemDetail" @click='selectJItem(item)'>
                <span :class='{checked:moreItem(item.array)}'></span><p>{{item.label}}</p>
                <em class="prodetail" v-if='item.array.length==1'>
                 {{item.MT_DETAIL_NAME}}</em>
              </div>
              <div class="price" v-if='item.array.length<=1'>
                <s>￥{{item.array[0].ORIGINAL_PRICE}}</s>
                <span>￥{{item.array[0].PRICE}}</span>
              </div>
          </div>

          <div class="allDetail" v-if='item.array.length>1'>
            <div class="itemDetail" :class='{checkItem:items.RECOMMEND==1}'  v-for='(items,indexI) in item.array' @click='selectJItemArr(items,index,indexI)' :key="indexI">
              <h3>{{items.MT_DETAIL_NAME}}</h3>
              <div class="itemsPrice">
                 <s>￥{{items.ORIGINAL_PRICE}}</s><span>￥{{items.PRICE}}</span>
              </div>
            </div>
            <div style="padding: 0 0.1rem"></div>
          </div>
        </div>
      </div>
    </div>
    <a class="checkMore" href="javascript:;" @click='goDetail(maintainMess.SERVDETAIL_URL,"图文详情")'>
      查看更多图文详情<img src="../../assets/image/maintain/more.png" class="more">
    </a>
    <div class="other">
      <div class="header">有<span>{{oLength}}</span>项可自助选择保养</div>
      <div class="otherItem" v-for='(item,index) in maintainMess.OTHER_DATA' :key="index">
        <div class="itemleft" @click='selectOther(index)'>
          <span :class='{checked:moreItem(item.array)}'></span><em>{{item.label}}</em>
        </div>
        <div class="itemRight">
          <s>￥{{item.array[0].ORIGINAL_PRICE}}</s>
          <span>￥{{item.array[0].PRICE}}</span>
          <!-- <em class="detail" @click='goDetail(item.array[0].DETAIL_DESC,"详情")'>详情</em> -->
        </div>
      </div>
    </div>
    <div class="workHours">
      <div class="itemleft">
        <img src="../../assets/image/maintain/workHours.png" alt="" />工时费
      </div>
      <div class="itemRight">
        <s>￥{{workHourM.mon}}</s>
        <span>￥{{workHourM.disMon}}</span>
        <img src="../../assets/image/maintain/question.png" alt="" @click='showWork(workHourM.mon)'/>
      </div>
    </div>
    <popup v-model='showModelV' width='100%' position='right' v-if='showModelV'>
      <x-header :title="titleVal" :left-options="{backText:'',preventGoBack:true}" @click.native='close' class='whiteHeader'>

      </x-header>
      <div class="car-box">
        <img :src="publicUrl+carMess.SICON" class="img1" v-if='carMess.SICON' alt=""/>
        <div>
          <p class="p1">{{carMess.BRAND}}</p>
          <p class="p2">实际里程{{carMess.MILE}}公里</p>
        </div>
        <img @click='replaceCar' src="../../assets/image/maintain/change.png" class="img2"  alt=""/>
      </div>
      <div v-html='showHtml'></div>
      <div class="goMaintain">
        <p>随原厂保养赠送12项免费检测!</p>
        <span @click='close'>立即保养</span>
      </div>
    </popup>
    <x-dialog v-model="showDiaLog" class="dialog-demo" hide-on-blur>
        <div class="dialog">
           <div class="top"></div>
           <div class="workMess">
             <img src="../../assets/image/maintain/workLogo.png" alt="" />
             <divider class="titles">工时费</divider>
             <div class="workDetail">
               <div class="workItem" v-for='(item,index) in workHourM.baoArray' v-if='item.HOUR_FEE>0' :key="index">
                 <span></span>
                 <h1>{{item.MT_DETAIL_NAME}}</h1>
                 <em>￥{{item.HOUR_FEE}}</em>
               </div>
             </div>
           </div>
           <div class="close">
             <img src="../../assets/image/maintain/close.png" alt="" @click='closeWork'>
           </div>
        </div>
      </x-dialog>
    <footer>
     <div class="footer">
      <div class="prices">
        <div class="allPrice">
          <span>总计：</span><em>{{(workHourM.sum-workHourM.disPrice).toFixed(2).split('.')[0]}}</em><label>.{{(workHourM.sum-workHourM.disPrice).toFixed(2).split('.')[1]}}</label><span class="yuan">元</span>
        </div>
        <div class="discount" v-if='userId'>
          <span>已抵券：</span><em>{{(Number(workHourM.disPrice)).toFixed(2).split('.')[0]}}</em><label>.{{(Number(workHourM.disPrice)).toFixed(2).split('.')[1]}}元</label>
        </div>
      </div>
      <div class="btns" @click='goSchedule'>
        分时优惠
      </div>
      </div>
    </footer>
    <confirm v-model="show5" show-input title="选择里程数" @on-confirm="comfireMile" @on-show="onShow" ref='confirms'>
    </confirm>
  </div>
</template>
<script>
/*智能保养*/
import {XHeader,Popup,XDialog,Divider,Confirm} from 'vux';
import { setCookie, getCookie } from '../../util/commonUtils';
import { deviceLocation } from '../../util/baidumap';
import download from '../../components/download';
export default {
  name:"maintainHome",
  // 数据
  data(){

    return{
    	userId:'',
      defaultId:'', //默认车辆id
      carMess:'' ,//车辆信息
      maintainMess:'', //所有的保养数据
      jLength:'',//基础保养数
      oLength:'', //其他保养数
      otherMaintain:[],//其他保养数据数组
      workHourM:{mon:0,disMon:0,maintainId:'',sum:0,disPrice:0,itemArray:[],baoArray:[]}, //选择商品后用到的参数分别 工时原价 工时折扣后 保养项目id 结算总价（未使用代金券） 抵代金券的价格  分时时要传的各个项目的参数
      showModelV:false,
      titleVal:'保养手册',//pop弹框的标题
      showHtml:'', //保养手册和详情显示的东西
      showDiaLog:false,  //控制保养工时弹框
      show5:false, //显示里程数弹框
      MDEPTHMTNAME: '',//有默认深度保养的时候
      smallMaintain:'',//小保养
      download:true,
    }
  },
  // 计算属性
  computed:{

  },
  // 导航离开该组件的对应路由时调用
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    this.$vux.loading.hide();
    next();
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if(!from.name){
        if(vm.$route.query.city){
          let id=vm.$route.query.id;
          vm.init(id);
        }else{
          vm.locations();
        }
      }else{
        vm.init();
      }
    })
  },
  // 创建（实例创建完成）
  created(){

    localStorage.setItem('from','maintain');
    sessionStorage.removeItem('returnLink');
    this.userId=getCookie('loginkey');
    if(!sessionStorage.getItem('closeDown')){
      this.download=true;
    }else{
      this.download=false;
    }
    //如果没有登录直接跳转到加车页面
    if(!this.userId&&!localStorage.getItem('selectCar')){
      localStorage.removeItem('addCar');
      localStorage.removeItem('editCar');
      this.$router.push('/addCar');
      return;
    }
    // 获取传一个参数默认选择MDEPTHMTNAME 是否深度保养
    if(sessionStorage.getItem('MDEPTHMTNAME')){
      this.MDEPTHMTNAME = JSON.parse(sessionStorage.getItem('MDEPTHMTNAME')).DEPTHMTNAME;
      //sessionStorage.removeItem('MDEPTHMTNAME');
    }
    if(sessionStorage.getItem('smallMaintain')){
      this.smallMaintain = JSON.parse(sessionStorage.getItem('smallMaintain'));
      //sessionStorage.removeItem('smallMaintain');
    }
  },
  // el被创建，并挂载到实例上
  mounted(){

  },
  // 方法（实例中的方法）-----------
  methods:{
    closeDowns(val){
      this.download=false;
      sessionStorage.setItem('closeDown',1);
    },
    locations(){
      let that = this;
      // let geolocation = new BMap.Geolocation();
      // geolocation.getCurrentPosition(function(r){
      //   if(this.getStatus() == BMAP_STATUS_SUCCESS){
      //     let lng = r.point.lng;//经度
      //     let lat = r.point.lat;//纬度
      //     let latlgt=lng+","+lat;
      //     let city=r.address.city.slice(0,r.address.city.length-1);
      //     sessionStorage.setItem('latlgt',latlgt);
      //     sessionStorage.setItem('city',city);
      //     that.getAddress(city);
      //   }
      //   else {
      //     alert('定位失败');
      //   }
      // },{enableHighAccuracy: true})
      deviceLocation().then((data) => {
        // 获取百度定位后信息
        if(data.result.addressComponent.city){
          let city = data.result.addressComponent.city.slice(0,data.result.addressComponent.city.length-1);
          let lng = data.result.location.lng;//经度
          let lat = data.result.location.lat;//纬度
          let latlgt=lng+","+lat;
          sessionStorage.setItem('latlgt',latlgt);
          sessionStorage.setItem('city',city);
          that.getAddress(city);
        }else{
          let lng ='113.937737';
          let lat = '22.554592';
          let latlgt=lng+","+lat;
          let city='深圳';
          sessionStorage.setItem('latlgt',latlgt);
          sessionStorage.setItem('city',city);
          that.getAddress(city);
        }
      })
    },
    //获取区域列表
    getAddress(city){
        this.$fetchPost('/CommonServiceWeb/getRegion.action',{CITY_ID:0}).then(res=>{
          if(res.STATUS_CODE==1){
            let allCity=res.RESULT_DATA;
            let flag=false;
            for(let i=0;i<allCity.length;i++){
              if(allCity[i].NAME==city){
                flag=true;
                if(allCity[i].MAINTAIN==='0'){
                  sessionStorage.setItem('city','深圳');
                }
              }
            }
            if(!flag){
              sessionStorage.setItem('city','深圳');
            }
            this.init();
          }
        },err=>{
          console.log(err);
        })
    },
    init(){
      if(localStorage.getItem('selectCar')){
        this.carMess=JSON.parse(localStorage.getItem('selectCar'));//选择车辆信息
        if(this.carMess.MILE==undefined){
          this.carMess.MILE=5000;
        }
        this.publicUrl=localStorage.getItem('publicUrl');//图片公共部分
        this.getMaintainItem();
        localStorage.removeItem('selectCar');
      }else{
        this.defaultId=getCookie('CAR_ID');
        //获取用户所有车辆
        this.$fetchGet('/UserWeb/getCars.action',{USER_ID:this.userId}).then(res=>{
            if(res.STATUS_CODE==1){
              let that=this;
              let carArr=res.CARS.filter(function(item){
                return item.BRAND!='未设置';
              })
              let arr=carArr.filter(function(item){
                return item.CAR_ID==that.defaultId;
              });
              if(carArr.length==0){
                localStorage.setItem("addCar",JSON.stringify({}));
                // 标识将跳回选择车辆
                localStorage.setItem('selectCars',1);
                localStorage.removeItem('editCar');
                this.$router.push('/addCar');
              }
              if(arr.length==0){
                arr=carArr;
              }
              for(let i=0;i<arr.length;i++){
                if(arr[i].IS_DEFAULT_CAR == 1){//默认车辆
                  this.carMess = arr[i];
                }
              }
              //无默认车辆选第一个 为了解决obd车辆
              if(!this.carMess){
                this.carMess = res.CARS[0];
              }
              //this.carMess=arr[0];//选择的汽车信息
              localStorage.setItem("publicUrl",res.CAR_LOGO_URL);
              this.publicUrl=res.CAR_LOGO_URL;
              this.getMaintainItem();
            }
          },err=>{
            console.log(err);
          })
      }

    },
    //返回
    goBack(){
      // location.href='http://carnt.carnettong.com:8088/CARNT/jsp/medition/index.jsp';
      // this.$router.push('/homepage');
      this.$router.go(-1);
    },
    //更换车辆
    replaceCar(){
      if(this.userId){//登录情况下
        this.$router.push('/selectCar');
      }else{//未登录情况下
        this.$router.push('/addCar');
        localStorage.removeItem('addCar');
        localStorage.removeItem('editCar');
      }
    },
    //选择里程数
    selectMille(val){
      const _this = this // 需要注意 onCancel 和 onConfirm 的 this 指向
      // this.$vux.confirm.show({
      //   // 组件除show外的属性
      //   showInput:true,
      //   title:'选择里程数',
      //   inputAttrs:{type:'text'},
      //   onConfirm (val) {//获取设置的值
      //     _this.$set(_this.carMess,'MILE',val);
      //     // _this.carMess.MILE=val;
      //     localStorage.setItem('selectCar',JSON.stringify(_this.carMess));
      //     _this.getMaintainItem();
      //   },
      //   onShow(){
      //     _this.$vux.confirm.setInputValue(val);
      //   }
      // })
      this.show5=true;

    },
    onShow(){
       this.$refs.confirms.setInputValue(this.carMess.MILE);
    },
    comfireMile(val){
      this.$set(this.carMess,'MILE',val);
      this.carMess.MILE=val;
      localStorage.setItem('selectCar',JSON.stringify(this.carMess));
      this.getMaintainItem();
    },
    //根据车辆信息和城市来获取保养项目
    getMaintainItem(){
      let obj={};
      obj.CARBRAND_NAME=this.carMess.BRAND+'_'+this.carMess.SET+'_'+this.carMess.MODEL;
      obj.MILEAGE=this.carMess.MILE;
      obj.CITY=sessionStorage.getItem('city');
      this.$vux.loading.show({
       text: ''
      });
      this.$fetchPost('/maintainWeb/getMTSolution.action',obj).then(res=>{
          this.$vux.loading.hide();
          if(res.STATUS_CODE==1){
            this.maintainMess=res;
            //从我的跳转过来的 大小保养不共存
            /*从 我的 过来的大保养*/
            if(this.MDEPTHMTNAME){
              sessionStorage.removeItem('smallMaintain');
              for(let i=0; i<this.maintainMess.OTHER_DATA.length;i++){
                this.$set(this.maintainMess.OTHER_DATA[i].array[0],'RECOMMEND',0);
                if(this.maintainMess.OTHER_DATA[i].array[0].MT_DETAIL_NAME==this.MDEPTHMTNAME){
                  this.$set(this.maintainMess.OTHER_DATA[i].array[0],'RECOMMEND',1);
                  break;
                }
              }
              for(let i=0;i<this.maintainMess.BASICS_DATA.length;i++){
                for(let j=0;j<this.maintainMess.BASICS_DATA[i].array.length;j++){
                  this.$set(this.maintainMess.BASICS_DATA[i].array[j],'RECOMMEND',0)
                }
              }
            }
            /*从 我的 过来的小保养*/
            if(sessionStorage.getItem('smallMaintain')){
              sessionStorage.removeItem('MDEPTHMTNAME');
              for(let i=0; i<this.maintainMess.OTHER_DATA.length;i++){
                this.$set(this.maintainMess.OTHER_DATA[i].array[0],'RECOMMEND',0);
                //这个搞死人了,有时候长度会大于1
                if(this.maintainMess.OTHER_DATA[i].array.length>1){
                  this.$set(this.maintainMess.OTHER_DATA[i].array[1],'RECOMMEND',0);
                }
              }
            }
            this.jLength=this.maintainMess.BASICS_DATA.length;
            this.oLength=this.maintainMess.OTHER_DATA.length;
            this.workHourMoney();
             // if(this.$route.query.city){
             //    this.goDetail(this.maintainMess.MANUAL_URL,"保养手册")
             //  }
          }else if(res.STATUS_CODE==15){//没有套餐项目
            let that=this;
            // localStorage.setItem('from','maintain')//表示换成操作来自保养
            this.$vux.confirm.show({
              title:'提示',
              content:'该车辆无保养套餐,请更换车辆',
              // 组件除show外的属性
              onConfirm () {
                if(that.userId){
                  that.$router.push('/selectCar');
                }else{
                  that.$router.push('/addCar');
                }
              }
            })
          }
        },err=>{
          console.log(err);
        })
    },
    workHourMoney(){//计算工时费
      let obj={
        mon:0,//工时原价
        disMon:0,//工时减完家
        maintainId:'', //保养项目Id
        sum:0,    //所有项目的总价
        disPrice:0,//所有项目抵的优惠券价格
        itemArray:[], //分时要传的参数
        baoArray:[]  //保养数组
      };
      for(let i=0;i<this.maintainMess.BASICS_DATA.length;i++){
        for(let j=0;j<this.maintainMess.BASICS_DATA[i].array.length;j++){
          if(this.maintainMess.BASICS_DATA[i].array[j].RECOMMEND==1){
            let objs={};//声明一个变量来存储每一个选择的项目
            obj.mon+=Number(this.maintainMess.BASICS_DATA[i].array[j].HOUR_ORIGINAL_FEE);
            obj.disMon+=Number(this.maintainMess.BASICS_DATA[i].array[j].HOUR_FEE);
            obj.maintainId+=this.maintainMess.BASICS_DATA[i].array[j].MAINTAIN_DETAIL_ID+',';
            obj.sum+=Number(this.maintainMess.BASICS_DATA[i].array[j].PRICE);
            objs.mtDetailId=this.maintainMess.BASICS_DATA[i].array[j].MAINTAIN_DETAIL_ID;
            objs.mtDetailName=this.maintainMess.BASICS_DATA[i].array[j].MT_DETAIL_NAME;
            objs.mtServId=this.maintainMess.BASICS_DATA[i].array[j].SERV_DETAIL_ID;
            obj.baoArray.push(this.maintainMess.BASICS_DATA[i].array[j]);
            obj.itemArray.push(objs);//将每一个选择的项目压人数组
          }
        }
      }
      for(let i=0;i<this.maintainMess.OTHER_DATA.length;i++){
        for(let j=0;j<this.maintainMess.OTHER_DATA[i].array.length;j++){
          if(this.maintainMess.OTHER_DATA[i].array[j].RECOMMEND==1){
            let objs={};
            obj.mon+=Number(this.maintainMess.OTHER_DATA[i].array[j].HOUR_ORIGINAL_FEE);
            obj.disMon+=Number(this.maintainMess.OTHER_DATA[i].array[j].HOUR_FEE);
            obj.maintainId+=this.maintainMess.OTHER_DATA[i].array[j].MAINTAIN_DETAIL_ID+',';
            obj.sum+=Number(this.maintainMess.OTHER_DATA[i].array[j].PRICE);
            objs.mtDetailId=this.maintainMess.OTHER_DATA[i].array[j].MAINTAIN_DETAIL_ID;
            objs.mtDetailName=this.maintainMess.OTHER_DATA[i].array[j].MT_DETAIL_NAME;
            objs.mtServId=this.maintainMess.OTHER_DATA[i].array[j].SERV_DETAIL_ID;
            obj.baoArray.push(this.maintainMess.OTHER_DATA[i].array[j]);
            obj.itemArray.push(objs);//将每一个选择的项目压人数组
          }
        }
      }
      obj.sum+=obj.disMon;
      this.workHourM=obj;
      this.computedVoucher();
    },
    //选择基础保养
    selectJItem(item){
      let flag=false;
      for(let i=0;i<item.array.length;i++){
        if(item.array[i].RECOMMEND==1){
          flag=true;
          break;
        }
      }
      for(let i=0;i<this.maintainMess.BASICS_DATA.length;i++){
        if(flag){
          for(let j=0;j<this.maintainMess.BASICS_DATA[i].array.length;j++){
            this.$set(this.maintainMess.BASICS_DATA[i].array[j],'RECOMMEND',0);
          }
        }else{
          for(let j=0;j<this.maintainMess.BASICS_DATA[i].array.length;j++){
            this.$set(this.maintainMess.BASICS_DATA[i].array[0],'RECOMMEND',1);
          }
        }
      }
      this.workHourMoney();
    },
    //点击工时费按钮时的弹出框
    showWork(num){
      if(num<=0){
        return;
      }
      this.showDiaLog=true;
    },
    moreItem(arr){
      let flag=false;
      for(let i=0;i<arr.length;i++){
        if(arr[i].RECOMMEND==1){
          flag=true;
          break;
        }
      }
      return flag;
    },
    //选择基础保养里多项切换
    selectJItemArr(items,index,indexI){
      for(let i=0;i<this.maintainMess.BASICS_DATA[index].array.length;i++){
        this.$set(this.maintainMess.BASICS_DATA[index].array[i],'RECOMMEND',0)
      }
      this.$set(this.maintainMess.BASICS_DATA[index].array[indexI],'RECOMMEND',1)
      this.workHourMoney();
    },
    //选择其他保养
    selectOther(index){
      if(this.maintainMess.OTHER_DATA[index].array[0].RECOMMEND==1){
        this.$set(this.maintainMess.OTHER_DATA[index].array[0],'RECOMMEND',0);
      }else{
        this.$set(this.maintainMess.OTHER_DATA[index].array[0],'RECOMMEND',1);
      }
      this.workHourMoney();
    },
    //代金券计算
    computedVoucher(){
      if(!this.userId){//未登录情况下不计算代金券
        return;
      }
      if(this.workHourM.itemArray.length==0){
        return;
      }
      this.$vux.loading.show({
       text: ''
      });
      let obj={};
      obj.USER_ID=this.userId;//用户id
      obj.COMP_ID=this.maintainMess.COMP_ID;//店铺id
      obj.MAINTAIN_DETAIL_ID=this.workHourM.maintainId.slice(0,this.workHourM.maintainId.length-1);//保养套餐项目ID
      this.$fetchPost('/CashVolumeWeb/getMTCashVolume.action',obj).then(res=>{
        this.$vux.loading.hide();
        if(res.STATUS_CODE==1){
          this.workHourM.disPrice=res.ON_SALE_PRICE;
          this.workHourM.sum=res.TOTAL_PRICE;
          sessionStorage.setItem('baoVoucher',JSON.stringify(res));
        }
      },err=>{
        console.log(err);
      })
    },
    //去分时优惠
    goSchedule(){
      let obj={};
      obj.CARBRAND_NAME=this.carMess.BRAND+'_'+this.carMess.SET+'_'+this.carMess.MODEL;
      obj.CITY='深圳';
      if(this.workHourM.itemArray.length==0){
        this.$vux.alert.show({
          title: '提示',
          content: '请先选择保养项目'
        })
        return;
      }
      if(this.userId){
        obj.CAR_ID=this.carMess.CAR_ID;
        obj.CAR_NUMBER=this.carMess.LICENCE;
        obj.MILEAGE=this.carMess.MILE;
        obj.IS_OBD=this.carMess.IS_OBD;
      }
      obj.ITEM_ARRAY=this.workHourM.itemArray;
      //存储分时优惠时需要的数据
      sessionStorage.setItem('scheduleMess',JSON.stringify(obj));
      this.$router.push('/mSchedule');
    },
    //去保养手册，保养详情，保养
    goDetail(html,name){
      this.showModelV=true;
      this.showHtml=html;
      this.titleVal=name;
    },
    close(){
      this.showModelV=false;
    },
    closeWork(){
      this.showDiaLog=false;
    },
    toServerChat(){
      this.$router.push('/customerService')
    }
  },
  // 子组件
  components:{
    XHeader,
    Popup,
    XDialog,
    Divider,
    Confirm,
    download
  }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
@import url('../../assets/css/public.less');

.maintainHome{
  width: 7.5rem;
  background: #eeeded;
  text-align: left;
  padding-bottom: 0.2rem;
  min-height: 100%;
  .vux-popup-dialog{
    .car-box{
      height: 1.4rem;
      box-sizing:border-box;
      position: relative;
      background: #ffffff;
      border-bottom:0.2rem solid #f5f5f5;
      display:flex;
      align-items:center;
      .p1{
        font-size: 0.3rem;
        color: #111111;
      }
      .p2{
        font-size: 0.26rem;
        color: #444444;
      }
      .img1{
        width: 0.9rem;
        height: 0.9rem;
        margin:0 .18rem 0 .29rem;
      }
      .img2{
        position:absolute;
        right:.32rem;
        top:50%;
        transform:translateY(-50%);
        width: 0.36rem;
        height:0.36rem;
      }
    }
    .goMaintain{
      padding-top: 0.25rem;
      height: 2.6rem;
      position: relative;
      text-align: center;
      p{
        color: #FA4040;
        font-size: 0.28rem;
      }
      span{
        font-size: 0.28rem;
        position: absolute;
        left: 50%;
        top: 1.5rem;
        margin-left: -1.4rem;
        width: 2.8rem;
        height: 0.7rem;
        background: #f22e2e;
        color: #ffffff;
        border-radius: 0.35rem;
        display: flex;
        display:-webkit-flex;
        justify-content:center;
        align-items:center;
        text-align: center;
      }
    }
  }
  .dialog{
    .top{
      height: 1.2rem;
      background:transparent;
      margin-top: -1.2rem;
    }
    img{
      width: 1.74rem;
      height: 1.74rem;
      margin-top: -1.4rem;
    }
    .workMess{
      background: #fff;
      padding-bottom: 0.3rem;
    }
    .titles{
      font-size: 0.32rem;
      font-weight: bold;
      margin: 0 0.8rem;
      color:#141414;
      background: #fff;
    }
    .workDetail{
      background: #fff;
      .workItem{
        display: flex;
        padding: 0 0.3rem;
        height: 0.6rem;
        line-height: 0.6rem;
        span{
          width: 0.1rem;
          height: 0.1rem;
          margin-top: 0.25rem;
          border-radius: 0.1rem;
          background: #f31616;
        }
        h1{
          font-size: 0.28rem;
          color: #141414;
          width: 80%;
          text-align: left;
          padding-left: 0.1rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        em{
          font-size: 0.28rem;
          font-style: normal;
          color: #f31616;
        }
      }
    }
    .close{
      background:transparent;
      margin-bottom: -1.2rem;
      img{
        height: 0.7rem;
        width: 0.7rem;
      }
    }
  }
  footer{
    position:fixed;
    bottom: 0;
    height: 0.9rem;
    line-height: 0.9rem;
    width: 100%;
    background: #2a2a2a;
    color: #fff;
    .footer{
      display: flex;
      width: 100%;
    }
    .btns{
      width: 27%;
      background: #e42e3b;
      font-size: 0.3rem;
      text-align: center;
    }
    .prices{
      width: 73%;
      overflow: hidden;
      .allPrice{
        float: left;
        line-height: 0.1rem;
        padding: 0 0.2rem 0 .3rem;
        margin: 0.2rem 0;
        height: 0.5rem;
        span{
          font-size: 0.25rem;
        }
        em{
          font-size: 0.4rem;
          font-style: normal;
          color: #e62937;
        }
        .yuan{
          padding-left: 0.05rem;
        }

      }
      .discount{
        float: left;
        line-height: 0.1rem;
        padding: 0 0.2rem 0 .15rem;
        margin: 0.2rem 0;
        height: 0.5rem;
        border-left: 1px solid #656567;
        span{
          font-size: 0.25rem;
        }
        em{
          font-size: 0.3rem;
          font-style: normal;
          color: #e62937;
        }
      }
      label{
        font-size: 0.2rem;
        color: #e62937;
      }
    }
  }
  .byText{
    color: #fff;
    font-size: 0.25rem;
    margin-right: 0.2rem;
  }
  .toServerchat{
    width: 0.44rem;
    height: 0.44rem;
    z-index: 5;
   }
  .carMess{
    height: 1.1rem;
    padding: 0 0.15rem;
    background:#e42e3b;
    display: flex;
    color: #fff;
    img{
      width: 0.7rem;
      height: 0.7rem;
      margin:0.2rem 0.15rem;
      border-radius: 0.4rem;
    }
    .detailMess{
      width: 61%;
      padding-left: 0.1rem;
      font-weight: 600;
      h1{
        font-size: 0.28rem;
        padding: 0.2rem 0 0.05rem 0;
        font-weight: 600;
      }
      p{
        font-size: 0.22rem;
      }
    }
    .mileage{
      padding-left: 0.2rem;
      margin: 0.1rem 0;
      h1{
        font-size: 0.35rem;
        padding:0 0.1rem 0.1rem;
        span{
          font-size: 0.24rem;
          padding-left: 0.1rem;
          font-weight: bolder;
        }
      }
      .mileMess{
        display: flex;
        justify-content: center;
        span{
          font-size: 0.2rem;
        }
        img{
          width: 0.21rem;
          height: 0.21rem;
          margin:0.07rem 0 0.07rem 0.25rem;
          vertical-align: middle;
          border-radius: 0;
        }
      }
      .borderLFu(rgba(255,255,255,.6));
    }
  }
  .mainCard{
    width: 7.2rem;
    margin: 0.25rem auto;
    background: #fff;
    border-radius: 0.1rem;
    box-shadow: 0 5px 0px rgba(223,223,223,.4);
    h1{
      height: 0.7rem;
      font-size: 0.3rem;
      color: #000;
      line-height: 0.7rem;
      padding: 0 0.15rem;
      background: #fafbf2;
      border-top-right-radius: 0.1rem;
      border-top-left-radius: 0.1rem;
      font-weight: bold;
      em{
        color: #e42e3b;
        font-style: normal;
      }
      span{
        float: right;
        color: #373737;
        font-size: 0.25rem;
        font-weight:normal;
      }
    }
    .cardItem{
      .selectItem{
        padding: 0.1rem 0;
        .allDetail{
          overflow: scroll;
          display: flex;
          margin-top: 0.1rem;
          margin-bottom: 0.1rem;
          height: 1.85rem;
          .itemDetail{
            min-width: 2.93rem;
            margin-left: 0.2rem;
            width: 2.75rem;
            height: 1.81rem;
            background: url(../../assets/image/maintain/nselectY1.png) right bottom no-repeat;
            background-size: 0.33rem 0.34rem;
            border:1px solid #c0c0c0;
            border-radius: 0.1rem;
            position: relative;
            .itemsPrice{
              height: 0.62rem;
              display: flex;
              padding: 0.2rem 0.3rem;
              border-top: 1px dashed #c0c0c0;
              s{
                font-size: 0.23rem;
                color:#333;
                margin-top: 0.05rem;
                padding-right: 0.1rem;
              }
              span{
                font-size: 0.3rem;
                color:#f31616;
              }
            }
            h3{
              padding:0.15rem 0.15rem 0 0.15rem;
              font-size: 0.26rem;
              height: 1rem;
              overflow:hidden;
              text-overflow:ellipsis;
              display:-webkit-box;
              -webkit-box-orient:vertical;
              -webkit-line-clamp:2;
              height: 0.8rem;
              margin-bottom: 0.2rem;
              height: 0.83rem;
              line-height: 0.37rem;
              text-align: center;
              font-weight: normal;
            }
          }
          .checkItem{
            background:#ffeff0 url(../../assets/image/maintain/selectY1.png) right bottom no-repeat;
            background-size: 0.33rem 0.34rem;
            border:1px solid #e42e3b;
            .itemsPrice{
              border-top: 1px dashed #e42e3b;
            }
          }
        }
        .selectY{
          height: 0.94rem;
          line-height: 0.94rem;
          margin-bottom: 0;
          span{
            margin-top: 0.3rem;
          }
        }
        .h2{
          font-size: 0.26rem;
          display: flex;
          color: #040404;
          line-height: 0.5rem;
          padding-left: 0.2rem;
          margin-bottom: 0rem;

          span{
            display: inline-block;
            width: 0.4rem;
            height: 0.4rem;
            margin-top: 0.1rem;
            float: none;
            background: url(../../assets/image/maintain/noChecked.png) no-repeat;
            background-size: 0.4rem 0.4rem;
          }
          p{
            margin-top: 0.1rem;
            font-weight: 550;
            padding-left: 0.1rem;
          }
          div{
            width: 60%;
            line-height: 0.4rem;
            float: right;
            display: flex;
          }
          em{
            color: #666;
            font-size: 0.24rem;
            font-style: normal;
            padding-left: 0.1rem;
            line-height: 0.6rem;
          }
          .price{
            display: flex;
            justify-content: flex-end;
            span{
              font-size: 0.3rem;
              color: #f31616;
              background: #fff;
              width: auto;
              padding-right: 0.2rem;
            }
            s{
              font-size: 0.22rem;
              color: #666;
              line-height: 0.6rem;
              padding-right: 0.1rem;
            }
          }
        }
      }
    }
  }
  .checkMore{
    font-size: 0.25rem;
    color: #43a0c4;
    display: block;
    height: 0.6rem;
    line-height: 0.6rem;
    text-align: center;
    margin-top: -0.15rem;
    img{
      width:0.42rem;
      height: 0.39rem;
      vertical-align: middle;
    }
  }
  .other{
    .header{
      font-size: 0.3rem;
      color: #000;
      font-weight: bold;
      border-left: 0.07rem solid #e42e3b;
      height: 0.7rem;
      text-indent: 0.13rem;
      line-height: 0.7rem;
      background: #fafbf2;
    }

    span{
      color: #e42e3b;
      padding: 0 0.05rem;
    }
  }
  .workHours,.otherItem{
    background: #fff;
    display: flex;
    justify-content: space-between;
    padding: 0 0.2rem 0 0.2rem;
  }
  .workHours{
    border-top: 0.2rem solid #eeeded;
    box-sizing: content-box;
  }
  .workHours,.otherItem{
    height: 0.8rem;
    line-height: 0.8rem;
    .itemleft{
      display: flex;
      align-items:center;
      width: 58%;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      img{
        width: 0.48rem;
        height: 0.41rem;
        padding-right: 0.15rem;
      }
      em{
        padding-left: 0.15rem;
        font-style: normal;
      }
      font-size:0.26rem;
      color:#141414;
    }
    .itemRight{
      display: flex;
      align-items:center;
      s{
        font-size: 0.2rem;
        color: #666;
        padding-right: 0.1rem;
      }
      span{
        font-size: 0.3rem;
        color: #f31616;
      }
      img{
        width: 0.57rem;
        height: 0.42rem;
        padding-left: 0.15rem;
        margin:0.18rem 0.25rem 0.18rem 0rem;
      }
      .detail{
        margin:0.15rem 0 0.15rem .24rem;
        color: #666;
        line-height: 0.4rem;
        border:1px solid #666;
        padding:0.05rem 0.2rem;
        font-size: 0.26rem;
        border-radius: 0.1rem;
        font-style: normal;
      }
    }
  }
  .otherItem{
    .itemleft{
      span{
        display: inline-block;
        width: 0.4rem;
        min-width: 0.4rem;
        height: 0.4rem;
        float: none;
        background: url(../../assets/image/maintain/noChecked.png) no-repeat;
        background-size: 0.4rem 0.4rem;
      }
    }
  }
  .checked{
    background: url(../../assets/image/maintain/checked.png) no-repeat!important;
        background-size: 0.4rem 0.4rem!important;
  }
}
.maintainActive{
  padding-top: 0.88rem;
}
</style>
